<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>treeGrid</title>
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/lib/layui/css/layui.css">
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/lib/layui/treetable.css">
    <script charset="utf-8" src="${pageContext.request.contextPath }/lib/jquery/jquery-3.3.1.js"></script>
    <script charset="utf-8" src="${pageContext.request.contextPath }/lib/layui/layui.js"></script>
    <script charset="utf-8" src="${pageContext.request.contextPath }/lib/layui/treetable.js"></script>
</head>
<body>

    <table id="treeTable1" style="width:100%">
        <tr>
            <td style="width:200px;">标题</td>
            <td>内容</td>
        </tr>
        <tr id="1">
            <td><span controller="true">1</span></td>
            <td>内容</td></tr>
        <tr id="2" pId="1">
            <td><span controller="true">2</span></td>
            <td>内容</td></tr>
        <tr id="3" pId="2">
            <td>3</td>
            <td>内容</td>
        </tr>
        <tr id="4" pId="2">
            <td>4</td>
            <td>内容</td>
        </tr>
        <tr id="5" pId="4">
            <td>4.1</td>
            <td>内容</td>
        </tr>
        <tr id="6" pId="1" hasChild="true">
            <td>5</td>
            <td>注意这个节点是动态加载的</td>
        </tr>
        <tr id="7">
            <td>8</td>
            <td>内容</td>
        </tr>
    </table>

    <script>
        $(function () {
            $("#treeTable").treeTable({
                expandLevel: 2,
                column: 1
            });
        });


        layui.config({
            base: '/lib/layui'
        }).extend({
            treetable: '/treetable'
        }).use(['layer', 'table', 'treetable'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var layer = layui.layer;
            var treetable = layui.treetable;

        });

    </script>
</body>
</html>